<template>
  <div class="opd-dbc-container" @click="activeMetaTo" :class="activeClass">
    <IvzBasicList />
    <template v-for="item in containerMetas" :key="item.id">
      <ivz-edit-modal v-if="item.type == 'modal'" :meta="item"/>
      <ivz-edit-drawer v-else-if="item.type == 'drawer'" :meta="item" />
    </template>
    <div class="opd-dbc-func">
      <ATag class="opd-dbc-tag" v-for="func in funcMetas" color="#2db7f5" :closable="func.closable"
            @close="() => closeHandle(func)" @click.stop="() => switchFuncTo(func)">{{func.name}}</ATag>
    </div>
  </div>
</template>

<script>

import {mapGetters, mapMutations} from "vuex";
import {EventBus, MetaEventType} from '@/event'
import {PlusCircleFilled} from '@ant-design/icons-vue'
import {ComponentType, PathSort, UnionType} from "@/store/consts";
import IvzBasicList from "@/components/list/IvzBasicList.vue";
import IvzEditDrawer from "@/components/edit/IvzEditDrawer.vue";
import IvzEditModal from "@/components/edit/IvzEditModal.vue";
import {BasicContainerChangeEvent, BasicContainerTabMetas} from "@/metas/ContainerMetas";
import {MixinContainer} from "@/components/container/MixinContainer";
import ActiveMetaMixin from "@/components/mixins/ActiveMetaMixin";
import {EditEventType} from "@/metas/EditTabMetas";
import MetaUtils from "@/utils/MetaUtils";

export default {
  name: "IvzBasicContainer",
  mixins: [MixinContainer, ActiveMetaMixin],
  components:{IvzEditModal, IvzEditDrawer, IvzBasicList, PlusCircleFilled},
  created() {
    this.setContainerTabMetas(BasicContainerTabMetas);
    this.switchActiveMetaTo(this.meta)

    // 如果是编辑状态, 表名不让修改
    if(this.isEdit) {
      // let metas = this.meta['tabMetas']['basic']['metas'];
      // if(metas instanceof Array) {
      //   metas.forEach(meta => {
      //     if(meta.field == 'tableName') {
      //       meta.disabled = true;
      //     }
      //   })
      // }
    }

    // 功能名称改变事件
    EventBus.listener(BasicContainerChangeEvent.NameChange, (value) => {
      this.funcMetas.filter(item => item.union==UnionType.Edit).forEach(item => {
        item.name = this.meta.tabModel.name;
        this.editMeta.tabModel.title = item.name;
      })
    });

    // 编辑组件挂载事件
    EventBus.listener(EditEventType.Mount, (meta) => {
      this.$nextTick().then(() => {
        this.funcMetas.filter(item => item.union==UnionType.Edit).forEach(item => {
          item.name = this.meta.tabModel.name;
          this.editMeta.tabModel.title = item.name;
        })
      })
    });

    // 编辑框类型改变
    EventBus.listener(BasicContainerChangeEvent.EditType, (val) => {
      this.containerMetas[0].type = val;
    })
  },
  methods: {
    ...mapMutations(['removeFunc', 'removeContainerMeta', 'switchEditVisible']),
    closeHandle(func) {
      this.removeFunc(func);
      this.removeContainerMeta(func);
    },

    switchFuncTo(func) {
      if(func.union == UnionType.Edit) {
        this.switchEditVisible(true);
        this.switchActiveMetaTo(this.editMeta)
      }
    }
  }
}
</script>

<style scoped>
.opd-dbc-container {
  width: 100%;
  height: 100%;
}
.opd-drag-container {
  height: 100%;
}
.opd-dbc-func {
  width: 100%;
  bottom: 0px;
  height: 32px;
  line-height: 29px;
  position: absolute;
  background: #efefef;
  padding: 0px 5px;
  /*border: 1px dashed #efefef;*/
}
.opd-dbc-tag {
  margin-left: 5px;
}
</style>
